
<!DOCTYPE html>
<html>
  <head>
    
<meta charset="utf-8" >

<title>网页显示温湿度 | 集邮</title>
<meta name="description" content="集邮不是集邮，可能是某种收藏癖好，收集创客相关">

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="shortcut icon" href="https://djzrs.gitee.io/jiyou/favicon.ico?v=1711621826170">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.10.0/katex.min.css">
<link rel="stylesheet" href="https://djzrs.gitee.io/jiyou/styles/main.css">



<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.5.1/build/highlight.min.js"></script>



  </head>
  <body>
    <div id="app" class="main">
      <div class="site-header-container">
  <div class="site-header">
    <div class="left">
      <a href="https://djzrs.gitee.io/jiyou">
        <img class="avatar" src="https://djzrs.gitee.io/jiyou/images/avatar.png?v=1711621826170" alt="" width="32px" height="32px">
      </a>
      <a href="https://djzrs.gitee.io/jiyou">
        <h1 class="site-title">集邮</h1>
      </a>
    </div>
    <div class="right">
      <transition name="fade">
        <i class="icon" :class="{ 'icon-close-outline': menuVisible, 'icon-menu-outline': !menuVisible }" @click="menuVisible = !menuVisible"></i>
      </transition>
    </div>
  </div>
</div>

<transition name="fade">
  <div class="menu-container" style="display: none;" v-show="menuVisible">
    <div class="menu-list">
      
        
          <a href="https://djzrs.gitee.io/jiyou" class="menu purple-link">
            首页
          </a>
        
      
        
          <a href="https://djzrs.gitee.io/jiyou/archives" class="menu purple-link">
            归档
          </a>
        
      
        
          <a href="https://djzrs.gitee.io/jiyou/tags" class="menu purple-link">
            标签
          </a>
        
      
        
          <a href="https://djzrs.gitee.io/jiyou/qfwytkg2n" class="menu purple-link">
            关于
          </a>
        
      
    </div>
  </div>
</transition>


      <div class="content-container">
        <div class="post-detail">
          
            <div class="feature-container" style="background-image: url('https://djzrs.gitee.io/jiyou/post-images/VIGu_h6Av.png')">
            </div>
          
          <h2 class="post-title">网页显示温湿度</h2>
          <div class="post-info post-detail-info">
            <span><i class="icon-calendar-outline"></i> 2023-12-14</span>
            
              <span>
                <i class="icon-pricetags-outline"></i>
                
                  <a href="https://djzrs.gitee.io/jiyou/kp9uiWjrJ/">
                    esp8266
                    
                      ，
                    
                  </a>
                
                  <a href="https://djzrs.gitee.io/jiyou/X4tYE40fiP/">
                    DHT11
                    
                      ，
                    
                  </a>
                
                  <a href="https://djzrs.gitee.io/jiyou/3NhQy02MEi/">
                    温湿度
                    
                      ，
                    
                  </a>
                
                  <a href="https://djzrs.gitee.io/jiyou/XAjN1xuSD8/">
                    gpt
                    
                      ，
                    
                  </a>
                
                  <a href="https://djzrs.gitee.io/jiyou/0fsCDGRT3Y/">
                    数据库
                    
                      ，
                    
                  </a>
                
                  <a href="https://djzrs.gitee.io/jiyou/p2vHjuXcnY/">
                    tinywebdb
                    
                      ，
                    
                  </a>
                
                  <a href="https://djzrs.gitee.io/jiyou/mJFkEuqdOl/">
                    网页
                    
                      ，
                    
                  </a>
                
                  <a href="https://djzrs.gitee.io/jiyou/3MLFZkLZS/">
                    microblocks
                    
                  </a>
                
              </span>
            
          </div>
          <div class="post-content" v-pre>
            <p>ESP8266采集温湿度添加到tinywebdb网络微数据库，网页通过数据库API获取数据并显示。</p>
<!-- more -->
<p>硬件使用ESP8266+DHT11<br>
编程使用microblocks<br>
数据库网站https://tinywebdb.appinventor.space/<br>
网页代码使用gpt3.5生成<br>
<strong>电路图</strong><br>
<img src="https://djzrs.gitee.io/jiyou/post-images/1702547745565.png" alt="" loading="lazy"></p>
<p><strong>程序</strong><br>
把图片拖入microblocks编辑器里面即可自动转成代码<br>
<img src="https://djzrs.gitee.io/jiyou/post-images/1702547782125.png" alt="" loading="lazy"><br>
或者从这下载：<a href="https://djzrs.gitee.io/code/%E6%B8%A9%E6%B9%BF%E5%BA%A6%E4%B8%8A%E4%BC%A0%E5%88%B0tinywebdb.ubp">代码</a><br>
<strong>效果</strong><br>
<a href="https://djzrs.gitee.io/">点击访问</a><br>
<img src="https://djzrs.gitee.io/jiyou/post-images/1702548192147.png" alt="" loading="lazy"></p>
<p><strong>网页代码</strong></p>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;自动更新数据&lt;/title&gt;
  &lt;meta charset=&quot;UTF-8&quot;&gt; &lt;!-- 设置字符编码为 UTF-8 --&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;div id=&quot;timeDisplay&quot;&gt;&lt;/div&gt;

&lt;h1&gt;安徽省阜阳市室外&lt;/h1&gt;
&lt;h2&gt;ESP8266+DHT11+microblocks+tinywebdb+gpt3.5&lt;/h2&gt;
  &lt;h1&gt;数据显示区域&lt;/h1&gt;
  &lt;p id=&quot;humidityDisplay&quot;&gt;&lt;/p&gt;
  &lt;p id=&quot;temperatureDisplay&quot;&gt;&lt;/p&gt;

  &lt;script&gt;
    function fetchData() {
      // 获取湿度数据
      fetch('https://tinywebdb.appinventor.space/api?user=mixly&amp;secret=8455f446&amp;action=get&amp;tag=Humidity')
        .then(response =&gt; response.json())
        .then(data =&gt; {
          // 更新页面上的湿度数据
          document.getElementById('humidityDisplay').innerText = `湿度：${data.Humidity || 0}%`;
        })
        .catch(error =&gt; {
          console.error('获取湿度数据时发生错误:', error);
        });

      // 获取温度数据
      fetch('https://tinywebdb.appinventor.space/api?user=mixly&amp;secret=8455f446&amp;action=get&amp;tag=Temperature')
        .then(response =&gt; response.json())
        .then(data =&gt; {
          // 更新页面上的温度数据
          const temperature = data.Temperature || 0; // 默认为0，避免出现 undefined
          document.getElementById('temperatureDisplay').innerText = `温度：${temperature}℃`;
        })
        .catch(error =&gt; {
          console.error('获取温度数据时发生错误:', error);
        });
    }

    function updateTime() {
      const now = new Date();
      const timeDisplay = document.getElementById('timeDisplay');
      timeDisplay.textContent = `当前时间：${now.toLocaleTimeString()}`;
    }

    // 每隔1秒更新时间
    setInterval(updateTime, 1000);

    // 每隔5秒更新数据
    setInterval(fetchData, 5000);

    // 初始加载数据
    fetchData();
    // 初始加载时间
    updateTime();
  &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

</code></pre>

          </div>
        </div>

        
          <div class="next-post">
            <a class="purple-link" href="https://djzrs.gitee.io/jiyou/MuzzMoqPB/">
              <h3 class="post-title">
                下一篇：青少年机器人等级考试软件及学习资料下载（3-6级）
              </h3>
            </a>
          </div>
          
      </div>

      

      <div class="site-footer">
  <div class="slogan">集邮不是集邮，可能是某种收藏癖好，收集创客相关</div>
  <div class="social-container">
    
      
        <a href="https://gitee.com/djzrs/jiyou" target="_blank">
          <i class="fab fa-github"></i>
        </a>
      
    
      
        <a href="https://qm.qq.com/q/MAQoNdBsw6" target="_blank">
          <i class="fab fa-twitter"></i>
        </a>
      
    
      
        <a href="https://qm.qq.com/q/MAQoNdBsw6" target="_blank">
          <i class="fab fa-weibo"></i>
        </a>
      
    
      
        <a href="https://qm.qq.com/q/MAQoNdBsw6" target="_blank">
          <i class="fab fa-zhihu"></i>
        </a>
      
    
      
        <a href="https://qm.qq.com/q/MAQoNdBsw6" target="_blank">
          <i class="fab fa-facebook"></i>
        </a>
      
    
  </div>
  Powered by <a href="https://github.com/getgridea/gridea" target="_blank">Gridea</a>
联系我：djzrs@qq.com | <a class="rss" href="https://djzrs.gitee.io/jiyou/atom.xml" target="_blank">RSS</a>
</div>


    </div>
    <script type="application/javascript">

hljs.initHighlightingOnLoad()

var app = new Vue({
  el: '#app',
  data: {
    menuVisible: false,
  },
})

</script>




  </body>
</html>
